$(function(){
    //监听游戏规则的点击
    $(".rules").click(function(){
        $(".rule").stop().fadeIn(100);
    });
    //监听关闭按钮的点击
    $(".close").click(function(){
        $(".rule").stop().fadeOut(100);
    });
    //监听开始游戏按钮的点击
    $(".start").click(function(){
        $(this).stop().fadeOut(100);
        //调用处理进度条方法
        progressHandler();
        //调用处理灰太狼动画
       startWolfAnimation();
        
    });
      //监听重新开始按钮的点击
      $(".reStart").click(function () {
        $(".mask").stop().fadeOut(100);
        // 调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法
        startWolfAnimation();
        $(".score").text(0);
    });
    //处理进度条方法
    function progressHandler(){
           // 重新设置进度条的宽度
           $(".progress").css({
            width: 180
          });
        var timer=setInterval(function(){
            var progressWidth=$(".progress").width();
            progressWidth-=1;
            $(".progress").css({
                width:progressWidth
            });
            
            if(progressWidth<=0){
                clearInterval(timer);
                $(".mask").stop().fadeIn(100);
                //停止灰太狼动画
                stopWolfAnimation();
            }

        },100);
    }

    //处理灰太狼动画
    function startWolfAnimation(){
          // 1.定义两个数组保存所有灰太狼和小灰灰的图片
          var wolf_1=['./images/dtl/h0.png','./images/dtl/h1.png','./images/dtl/h2.png','./images/dtl/h3.png','./images/dtl/h4.png','./images/dtl/h5.png','./images/dtl/h6.png','./images/dtl/h7.png','./images/dtl/h8.png','./images/dtl/h9.png'];
          var wolf_2=['./images/dtl/x0.png','./images/dtl/x1.png','./images/dtl/x2.png','./images/dtl/x3.png','./images/dtl/x4.png','./images/dtl/x5.png','./images/dtl/x6.png','./images/dtl/x7.png','./images/dtl/x8.png','./images/dtl/x9.png'];
          // 2.定义一个数组保存所有可能出现的位置
      
          var arrPos = [
              {left:"100px",top:"115px"},
              {left:"20px",top:"160px"},
              {left:"190px",top:"142px"},
              {left:"105px",top:"193px"},
              {left:"19px",top:"221px"},
              {left:"202px",top:"212px"},
              {left:"120px",top:"275px"},
              {left:"30px",top:"295px"},
              {left:"209px",top:"297px"}
          ];

          //创建一个图片  创建class='wolfImage'是为了后面能调用图片
          var $wolfImage=$("<img src='' class='wolfImage'>");
          //随机获取图片位置
          var posIndex = Math.round(Math.random() * 8);
          //设置图片显示的位置
          $wolfImage.css({
             position:"absolute",
              left:arrPos[posIndex].left,
              top:arrPos[posIndex].top
          });
           // 随机获取数组类型
        var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
        //设置图片的内容
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        wolfTimer = setInterval(function () {
            if(wolfIndex > wolfIndexEnd){
                $wolfImage.remove();
                clearInterval(wolfTimer);
                startWolfAnimation();
            }
            $wolfImage.attr("src", wolfType[wolfIndex]);
            wolfIndex++;
        }, 300);

    

          //将图片添加到界面
          $(".container").append($wolfImage);
           // 调用处理游戏规则的方法
            gameRules($wolfImage);

    };

    //处理规则方法  有$wolfImage是因为前面有给class='wolfImage
    function gameRules($wolfImage){
        //one触发一次
        $wolfImage.one("click",function(){
            window.wolfIndex=5;
            window.wolfIndexEnd=9;

           // 拿到当前点击图片的地址
           var $src = $(this).attr("src");
           // 根据图片地址判断是否是灰太狼
           var flag = $src.indexOf("h") >= 0;
           console.log(flag);
           // 根据点击的图片类型增减分数
           if(flag){
               // +10
               $(".score").text(parseInt($(".score").text()) + 10);
           }else{
               // -10
               $(".score").text(parseInt($(".score").text()) - 10);
           }

        });
    }
     //停止灰太狼动画
     function stopWolfAnimation(){

        $(".wolfImage").remove();
        clearInterval(wolfTimer);

  };


});